<template>
  <!-- 统一页面布局 -->
  <PageCard>
    <!-- 多tabs表格 表单 -->
    <FormTablePage
      ref="goodsInfoFormPage"
      :formConfig="formConfig"
      :formRowData.sync="rowData"
      :form-current-row-id.sync="currentRowId"
      :formTableRowIds.sync="tableRowIds"
      :formGridTabs="formGridTabs"
      :gridActiveTabs="gridActiveTabs"
      @formBackEvent="backEvent"
      @formLastNextRow="lastNextRow"
    />

    <!-- 新增商品明细 -->
    <AddGoodsStandard
      :showDialog.sync="addStandardConfig.showDialog"
      :rowId.sync="addStandardConfig.rowId"
      :title="addStandardConfig.title"
      :formId.sync="addStandardConfig.formId"
      :grid="addStandardConfig.grid"
      :refreshGrid="addStandardConfig.refreshGrid"
    />
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import FormTablePage from "@/components/FormTablePage/index.vue";
import AddGoodsStandard from "./components/addGoodsStandard.vue";

import { goodsInfoAdd, goodsInfoDetail } from "@/api/goods/info";
import { goodsStandardPage } from "@/api/goods/standard";
import { catalogTreeList } from "@/api/goods/catalog";

import $commonUtil from "@/utils/common.js";

export default {
  name: "GoodsInfoDetailPage",
  components: {
    PageCard,
    FormTablePage,
    AddGoodsStandard,
  },
  data() {
    return {
      catalogId: void 0,
      addStandardConfig: {
        showDialog: false,
        rowId: null,
        title: null,
        formId: null,
        grid: null,
        refreshGrid: null,
      },
      formConfig: {
        title: "商品信息-表单",
        toolBarBtns: [
          {
            name: "新增",
            type: "primary",
            iconName: "add",
            permission: "AddGoodsInfo",
            click: () => {
              this.rowData = null;
              this.currentRowId = null;
              this.$refs.goodsInfoFormPage.reloadTableFormPage();
            },
          },
          {
            name: "保存",
            type: "success",
            iconName: "save",
            permission: "AddGoodsInfo",
            click: async (rowId, formData) => {
              console.log(formData);
              if (formData.images && formData.images.length > 0) {
                formData.goodsImages = formData.images.join(",");
              }
              if (rowId && rowId > 0) {
                formData.id = rowId;
              } else {
                const { data } = await goodsInfoAdd(formData);
                rowId = data.id;
              }
              await this.loadGoodsInfoDetail(rowId);
            },
          },
        ],
        formItems: [
          [
            {
              title: "商品编号",
              name: "goodsNo",
              col: 5,
              disabled: true,
            },
            {
              title: "商品名称",
              name: "goodsName",
              col: 5,
              rules: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
            },
            {
              title: "商品分类",
              name: "catalogId",
              tree: true,
              disabled: true,
              defaultValue: this.getCatalogId,
              col: 5,
              input: "select",
              treeDataFun: catalogTreeList,
              rules: [{ required: true, message: "请选择分类", trigger: "blur,change" }],
            },
          ],
          [
            {
              title: "创建人",
              name: "createName",
              col: 5,
              disabled: true,
              defaultValue: this.$store.getters.info.username,
            },
            {
              title: "修改人",
              name: "modifyName",
              col: 5,
              disabled: true,
              defaultValue: this.$store.getters.info.username,
            },
            {
              title: "创建时间",
              name: "createTime",
              col: 5,
              disabled: true,
            },
          ],
          [
            {
              title: "启用状态",
              name: "isEnabled",
              col: 5,
              defaultValue: 1,
              input: "select",
              options: this.$config.ENABLED_STATUS,
            },
          ],
          [
            {
              title: "备注",
              name: "remark",
              col: 15,
              input: "textarea",
            },
          ],
          [
            {
              title: "商品图片",
              name: "images",
              col: 24,
              input: "image",
              rules: [{ required: true, message: "请上传图片", trigger: "change" }],
            },
          ],
        ],
      },
      formGridTabs: [
        {
          label: "商品明细",
          name: "goodsStandard",
          type: "grid",
          loading: false,
          height: 700,
          pagination: {
            onShow: true,
            position: "right",
          },
          toolbarBtns: [
            {
              name: "新增",
              type: "primary",
              iconName: "add",
              permission: "AddGoodsInfo",
              click: (formId, refreshGrid, _this) => {
                if (!formId) {
                  this.$message.error("请先保存表单数据");
                  return;
                }
                this.addStandardConfig.showDialog = true;
                this.addStandardConfig.formId = formId;
                this.addStandardConfig.title = "新增";
                this.addStandardConfig.grid = _this;
                this.addStandardConfig.refreshGrid = refreshGrid;
              },
              onDisabled(formData) {
                return $commonUtil.isEmptyObject(formData) || !formData.id;
              },
            },
          ],
          columns: [
            {
              title: "规格名称",
              name: "standardName",
              width: 150,
              align: "center",
            },
            {
              title: "颜色",
              name: "colorName",
              width: 150,
              align: "center",
            },
            {
              title: "尺码",
              name: "sizeName",
              width: 150,
              align: "center",
            },
            {
              title: "原价",
              name: "oriPrice",
              width: 150,
              align: "left",
            },
            {
              title: "销售价",
              name: "salePrice",
              width: 150,
              align: "left",
            },
            {
              title: "图片",
              name: "standardImages",
              width: 150,
              align: "center",
            },
            {
              title: "上架状态",
              name: "isSale",
              width: 150,
              select: true,
              options: this.$config.GOODS_IS_SALE,
              optionsColor: ["#F56C6C", "#1afa29"],
            },
          ],
          tableData: [],
          api: goodsStandardPage,
          realoadTableData: async (_this, ref, api, formId, page) => {
            if (!formId) return;
            const { pageNumber, pageSize } = page;
            const res = await api({ pageNumber, pageSize, goodsId: formId });
            this.$set(_this, "tableData", res.data.rows);
          },
        },
      ],
      gridActiveTabs: "",
      rowData: null,
      currentRowId: null,
      tableRowIds: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.loadGoodsInfoDetail(this.$route.query.id);
    });
  },
  methods: {
    // 分类
    async getCatalogId() {
      return this.$route.params.catalogId;
    },

    // 详情
    async loadGoodsInfoDetail(rowId) {
      if (!rowId) return;

      this.currentRowId = rowId;
      const { data } = await goodsInfoDetail(rowId);
      if (data.goodsImages && String(data.goodsImages).trim() !== "") {
        data.images = String(data.goodsImages)
          .split(",")
          .filter((item) => item && String(item).trim() !== "");
      }
      this.rowData = data;
      this.$refs.goodsInfoFormPage.reloadTableFormPage();
    },

    // 点击返回
    async backEvent() {
      const catalogId = await this.getCatalogId();
      this.$router.push({
        name: "GoodsInfoPage",
        params: {
          catalogId: catalogId,
        },
      });
    },
    // 上一页 下一页
    lastNextRow() {},
  },
};
</script>
<style lang="scss" scoped></style>
